<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>帮助编辑/添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box mt">
            <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="服务标题" prop="service_name">
                    <el-input v-model="form.service_name"></el-input>
                </el-form-item>
                <el-form-item label="服务时间" required>
                    <el-col :span="11">
                      <el-form-item prop="start_time">
                        <el-date-picker type="date" placeholder="开始日期" v-model="form.start_time" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                      <el-form-item prop="end_time">
                        <el-date-picker type="date" placeholder="结束日期" v-model="form.end_time" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="现价" prop="sales_price">
                  <el-input v-model.number="form.sales_price"></el-input>
                </el-form-item>
                <el-form-item label="原价" prop="origin_price">
                  <el-input v-model.number="form.origin_price"></el-input>
                </el-form-item>
                <el-form-item label="特价开关" prop="special">
                  <el-select v-model="form.special" placeholder="请选择特价开关">
                    <el-option label="关" value="0"></el-option>
                    <el-option label="开" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="推荐开关" prop="recommend">
                  <el-select v-model="form.recommend" placeholder="请选择推荐开关">
                    <el-option label="关" value="0"></el-option>
                    <el-option label="开" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务类型" prop="type">
                  <el-select v-model="form.type" placeholder="请选择服务类型">
                    <el-option label="普通服务" value="0"></el-option>
                    <el-option label="押金" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务范围" prop="scope">
                  <el-select v-model="form.scope" placeholder="请选择服务范围">
                    <el-option label="全国" value="0"></el-option>
                    <el-option label="省" value="1"></el-option>
                    <el-option label="市" value="2"></el-option>
                    <el-option label="县/区" value="3"></el-option>
                    <el-option label="学校" value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="省" prop="province" v-if="form.scope >= 1 && form.scope < 4">
                  <el-input v-model="form.province"></el-input>
                </el-form-item>      

                <el-form-item label="市" prop="city" v-if="form.scope >= 2 && form.scope < 4">
                  <el-input v-model="form.city"></el-input>
                </el-form-item>

                <el-form-item label="县" prop="area" v-if="form.scope == 3">
                  <el-input v-model="form.area"></el-input>
                </el-form-item>

                <el-form-item label="学校搜索" v-if="form.scope == 4">
                  <el-input v-model="school_name" style="width: 220px;" placeholder="请输入学校名称"></el-input>
                  <el-button type="primary" icon="el-icon-search" @click="searchSchool">搜索</el-button>
                </el-form-item>

                <el-form-item label="学校" prop="school_id" v-if="form.scope == 4">
                  <el-select v-model="form.school_id" placeholder="请选择服务范围">
                    <el-option :label="item.school_name" :value="item.id" v-for="(item,index) in school_list" :key="index"></el-option>
                  </el-select>
                </el-form-item>

                <!-- 优惠券列表，优惠券选择，数组形式 -->
                <el-form-item label="赠送优惠券">
                  <el-checkbox-group v-model="form.coupon_id">
                    <el-tooltip class="item" effect="dark" :content="item.intro" placement="top" v-for="item in coupon" 
                       :key="item.id">
                      <el-checkbox :label="item.id">
                        {{item.name}}
                      </el-checkbox>
                    </el-tooltip>
                  </el-checkbox-group>
                </el-form-item>  

                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="form.sort"></el-input>
                </el-form-item>

                <v-img imgType="service" :img="form.img" imgTips="封面图片"></v-img>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button @click="navTop" v-if="!Edit">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import bus from '../../../bus.js';
import vImg from '../../common/OneImgUpload';
export default {
  name: 'service-form',
  components: {
    vImg
  },
  data: function() {
    return {
      Edit: false,
      form: {
        coupon_id: []
      },
      rules: {
          service_name: [
            {required: true, message: '服务标题不能为空'}
          ],
          start_time: [
            {required: true, message: '开始时间为必填'}
          ],
          end_time: [
            {required: true, message: '结束时间为必填'}
          ],
          sales_price: [
            {required: true, message: '现价为必填'},
            { type: 'number', message: '只能是数字' }
          ],
          origin_price: [
            {required: true, message: '原价为必填'},
            { type: 'number', message: '只能是数字' }
          ],
          special: [
            {required: true, message: '特价开关为必填'}
          ],
          recommend: [
            {required: true, message: '此项必填'}
          ],
          type: [
            {required: true, message: '此项必填'}
          ],
          scope: [
            {required: true, message: '此项必填'}
          ],
          sort: [
            { required: true, message: '排序不能为空' },
            { type: 'number', message: '排序只能是数字' }
          ]
      },
      coupon: null,
      school_name: undefined,
      school_list: null
    }
  },
  methods: {
    onSubmit(formName) {
      //  进行规则验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // 验证通过，进行编辑/添加判断
            if (!this.Edit) {
                // 不是编辑，去除id
                delete this.form.id
                APP.ajax('post@service/add', this.form, res => {
                    if (res.data.status === 200) {
                        this.$message.success('添加成功！');
                    }
                })
            } else {
                APP.ajax('post@service/update', this.form, res => {
                    if (res.data.status === 200) {
                        this.$message.success('编辑成功！')
                    }
                })
            }
        } else {
          return false;
        }
      });
    },
    navTop() {
      bus.$emit('ViewShow', '取消');
    },
    searchSchool() {
      let params = {
        province: '',
        city: '',
        area: '',
        school_name: this.school_name
      }
      APP.ajax('post@school/search', params, res => {
        this.school_list = res.data.data.data
      })
    }
  },
  mounted () {
    // 获取优惠券列表
    APP.ajax('coupon/list', {}, res => {
      this.coupon = res.data.data.data;
    });
    // 判断是否有id传值，没有则不是编辑页面，而是添加页面
    if (this.$route.params.id) {
        this.Edit = true;
        APP.ajax('post@service/detail', { id: this.$route.params.id }, res => {
            this.form = res.data.data[0];
        })
    }
    bus.$on('changeServiceImage', e => {
      this.form.img = e
    })
  }
}
</script>
<style scoped>
.avatar{
    float: left;
    width: 100%;
    height: 100%;
}
</style>

